<template>
  <div class="apld-charts" ref="chartRef" />
</template>

<script setup lang="ts">
import { ref, nextTick, toRefs, onMounted, PropType } from "vue";
import * as echarts from "echarts/core";
import { useCharts, ChartType } from "./useCharts";

defineOptions({
  name: "apld-charts",
});

const chartRef = ref<HTMLDivElement>();

type Props = {
  type?: string;
  timeLoad?: boolean;
  option:any;
  // option: PropType<echarts.EChartsCoreOption>;
  mapName?:any;
  svgMapUrl?: string;
};
const props = withDefaults(defineProps<Props>(), {
  timeLoad: true,
});

const { type, option } = toRefs(props);

const { charts, setOptions, initChart } = useCharts({
  type,
  svgMapUrl: props.svgMapUrl,
  timeLoad: props.timeLoad,
  el: chartRef,
  mapName: props.mapName,
});

onMounted(() => {
  nextTick(async () => {
    await initChart(option.value);
  });
  if (props.option) {
    setOptions({
      ...props.option,
    });
  }
});

defineExpose({
  myChart: charts,
  setOptions,
});
</script>

<style scoped lang="scss">
.apld-charts {
  width: 100%;
  height: 100%;
  min-height: 150.17px;
}
</style>
